import React,{useState,useEffect} from 'react'
import { Button, message,Select,Space, Form, Input,Switch,Modal,Popconfirm,Drawer   } from 'antd';
import { Tag } from 'antd';
import $axios,{ImgUrl} from '../../../utils/axios'
import UpLoadImg from '../item/UpLoadImg';
// import 

export default function TeamDetail(props:any) {
    const [teamInfo,setTeamInfo]=useState<any>({
        team:{},
        organ:{},
        manage:{},
        labelArr:[]
    })
    const [doctorList,setDoctorList]=useState<any[]>([])
    const [teamJoin,setTeamJoin]=useState<any[]>([])
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [Organ,setOrgan]=useState<any[]>([])
    const [tags,setTags]=useState<any[]>([])
    const [picture,setPicture]=useState<any>()
    const [initialValues,setInitialValues]=useState<any>()
    const [defaultSelect,setDefaultSelect]=useState<any>()
    const [open, setOpen] = useState(false);


    useEffect(()=>{
        getTOSSMLById()
        getDoctorByTeamId()
        getJoinTeamApplyByTeamId()
        getTableData()
        getLabelBySearchPage()
        
    },[])
    //   返回
    const back=()=>{
        props.back()
    }
    // 根据id查询团队，机构，签约人数，团队长，团队标签
    const getTOSSMLById=()=>{ ///api/getTOSSMLById
        $axios({
          url:'/api/getTOSSMLById',
          method:'post',
          data:{
            id:props.id
          }
        }).then((res:any)=>{
          console.log(res,'团队');
          setTeamInfo(res.data)
          
        })
    }
    // 根据团队id查询该团队下的所有医生以及对应角色信息以及签约人数 /api/getDoctorByTeamId
    const getDoctorByTeamId=()=>{ 
        $axios({
          url:'/api/getDoctorByTeamId',
          method:'post',
          data:{
            teamId:props.id
          }
        }).then((res:any)=>{
          console.log(res,'医生');
          setDoctorList(res.data)
          
        })
    } 
    // 根据id查询团队申请消息 /api/getJoinTeamApplyByTeamId
    const getJoinTeamApplyByTeamId=()=>{ 
        $axios({
          url:'/api/getJoinTeamApplyByTeamId',
          method:'post',
          data:{
            teamId:props.id
          }
        }).then((res:any)=>{
          console.log(res);
          setTeamJoin(res.data)
          
        })
    }

    const showModal = () => {
        console.log(teamInfo);
        debugger
        
        let data = {
            name:JSON.parse(JSON.stringify(teamInfo?.team.name)),
            organId:JSON.parse(JSON.stringify(teamInfo?.organ.id)),
            labelIdStr:JSON.parse(JSON.stringify(teamInfo?.labelArr)).map((i:any)=>{
                return i.id
            }),
            picture:JSON.parse(JSON.stringify(teamInfo?.team.picture)),
        }

        setInitialValues(data)
        setIsModalOpen(true);
      };
      const handleCancel = () => {

        setIsModalOpen(false);
      };
    // 获取图片
    const getuploadVal=(value:any)=>{
        setPicture("public/upload/u5598.png")
    }
      const onFinish = (values: any) => {
        values.picture = "public/upload/u5598.png"
        message.success('保存成功');
        
        console.log(values);
        setIsModalOpen(false)
        
    };
      // 获取机构数据
      const getTableData =()=>{
        $axios({
        url:'/api/getAllChcsOrgan',
        method:'post',
        }).then((res:any)=>{
        console.log(res.data.rows);
        
        setOrgan([...res.data.rows])
        })
    }
    // 查询标签信息
    const getLabelBySearchPage =()=>{
        $axios({
        url:'/api/getLabelBySearchPage',
        method:'post',
        }).then((res:any)=>{
        if(res.data.result){
            setTags([...res.data.result])
        }

    
        })
    }
        // 删除团队
        const confirm = () => {
            console.log(teamInfo.team.id);
            delTeamOne()
          };
          const delTeamOne=()=>{
            $axios({
              url:'/api/delTeamById',
              method:'post',
              data:{
                id:teamInfo.team.id
              }
            }).then((res:any)=>{
              console.log(res);
              if(res.code==200){
                message.success('删除成功');
                getTOSSMLById()
              }else{
                message.error('删除失败');
              }
            })
          }
        //   查看医生信息
          const [Drawerdata,setDrawerdata] = useState<any>()
          const [DrawerStatus,setDrawerStatus] = useState<any>(0)

          const showDrawer = (index:number,status:number) => {
            // console.log(doctorList[index]);
            if(status==1){
                let newData = doctorList[index]
                setDrawerdata(newData)
            }else{
                let newData = teamJoin[index].doctor[0]
                setDrawerdata(newData)
            }
            setDrawerStatus(status)
            setOpen(true);
          };
        
          const onClose = () => {
            setOpen(false);
          };
    // 通过确认 /api/joinTeam
    const confirmJoin=(doctorId:any,teamId:any)=>{
        $axios({
            url:'/api/joinTeam',
            method:'post',
            data:{
                teamId:teamId,
                doctorId:doctorId,
                status:0
            }
          }).then((res:any)=>{
            // console.log(res);
            if(res.code==200){
                message.success('通过成功')
                getTOSSMLById()
                getDoctorByTeamId()
                getJoinTeamApplyByTeamId()
                getTableData()
                getLabelBySearchPage()
            }else{
                message.error('通过失败')
            }
            
          })
    }
    // 拒绝确认
    const confirmNo=(doctorId:any,teamId:any)=>{
        $axios({
            url:'/api/joinTeam',
            method:'post',
            data:{
                teamId:teamId,
                doctorId:doctorId,
                status:1
            }
          }).then((res:any)=>{
            // console.log(res);
            if(res.code==200){
                message.success('已成功拒绝请求')
            }else{
                message.error('拒绝请求失败')
            }
            
          })
    }
    // 设为团队长
    const upManage=(teamId:any,doctorId:any)=>{
        console.log(teamId,doctorId,'设为团队长');
        
        $axios({
            url:'/api/updateManageByTeamIdDoctorId',
            method:'post',
            data:{
                teamId:teamId,
                doctorId:doctorId,
            }
          }).then((res:any)=>{
            // console.log(res);
            if(res.code==200){
                message.success('团队长设置成功')
                getTOSSMLById()
                getDoctorByTeamId()
                getJoinTeamApplyByTeamId()
                getTableData()
                getLabelBySearchPage()
                setOpen(false);
            }else{
                message.error('团队长设置失败')
            }
            
          })
    }
    return (
        <div>
            <div style={{borderLeft:'4px solid #2984F8',padding:'10px',marginBottom:'10px',borderBottom:'1px solid #f2f7fb',margin:'0 0 20px 0'}}>
                <h3>团队详情</h3>
            </div>
            <div >
                <h3>团队信息</h3>
                <div >
                    <div style={{fontSize:'14px'}}>
                        <div  style={{display:"flex",alignItems:'center',flexWrap:'wrap'}}>
                            <p style={{flex:'1'}}><span style={{color:'#999999',marginRight:'15px'}}>团队编号</span>{teamInfo.team?.number}</p>
                            <p style={{flex:'1'}}><span style={{color:'#999999',marginRight:'15px'}}>团队名称</span>{teamInfo.team?.name}</p>
                            <p style={{flex:'1',display:"flex",alignItems:'center'}} ><span style={{color:'#999999',marginRight:'15px'}} >团队头像</span> <img style={{width:'60px',height:'60px'}} src={ImgUrl+teamInfo.team?.picture} alt="" /></p>
                            <p style={{flex:'1'}}>
                                <span style={{color:'#999999',marginRight:'15px'}}>团队标签</span>
                                <Space size={[0, 'small']} wrap>
                                    {teamInfo.labelArr.map((item:any,index:number)=>{
                                        return <Tag bordered={false} color={item.color||'magenta'} key={index}>
                                                    {item?.name}
                                                </Tag>
                                    })}
                                    
                                </Space>
                            </p>
                        </div>
                        <div  style={{display:"flex",flexWrap:'wrap'}}>
                            <p style={{flex:'1'}}><span style={{color:'#999999',marginRight:'15px'}}>机构地址</span>{teamInfo.organ?.address}</p>
                            <p style={{flex:'1'}}><span style={{color:'#999999',marginRight:'15px'}}>团队评分</span>{teamInfo.team?.score}</p>
                            <p style={{flex:'1'}}><span style={{color:'#999999',marginRight:'15px'}}>分享量</span>{teamInfo.team?.shareCount}</p>
                            <p style={{flex:'1'}}><span style={{color:'#999999',marginRight:'15px'}}>签约人数</span>0</p>
                        </div>
                    </div>
                </div>
                <div style={{display:"flex",flexWrap:'wrap',margin:'20px 0'}}>
                    <span style={{color:'#999999',marginRight:'15px'}}>邀请二维码</span>
                    <div style={{}}>
                        <img src="" alt="" style={{width:'130px',height:'130px',background:'#f2f7fb'}} />
                        <div style={{color:'#999999',fontSize:'12px'}}>医生可通过手机管理端扫描此二维码申请加入团队</div>
                    </div>
                </div>
                <div style={{display:"flex",flexWrap:'wrap',margin:'20px 0'}}><span style={{color:'#999999',marginRight:'15px'}}>创建时间</span><p>{teamInfo.manage?.createTime}</p></div>
                <div style={{display:"flex",flexWrap:'wrap',margin:'20px 0'}}><span style={{color:'#999999',marginRight:'15px'}}>创建人</span><p>{teamInfo.manage?.name}</p></div>
                <div style={{display:"flex",flexWrap:'wrap',margin:'20px 0'}}><span style={{color:'#999999',marginRight:'15px'}}>团队状态</span><p><Switch checkedChildren="启用" unCheckedChildren="关闭" defaultChecked={teamInfo.manage?.status==1?true:false}   /></p></div>
                
                
            </div>
            <div>
                <h3 style={{margin:'20px 0'}}>团队成员({doctorList.length})</h3>
                <div  style={{display:'flex',alignItems:'center',flexWrap:'wrap'}}>
                    {
                        doctorList.map((item:any,index:number)=>{
                            return  <div key={index+item?.id} className='item' style={{position:'relative',width:'400px',marginRight:'20px',display:'flex',flexDirection:'column',justifyContent:'end',borderRadius:'15px',padding:'0 15px',boxShadow:'rgba(0, 0, 0, 0.24) 0 3px 8px'}}>
                                        <div style={{display:'flex',alignItems:'center',borderBottom:'1px solid #F2F2F2',padding:'15px 0'}}>
                                            <img src={ImgUrl+item?.picture} alt=""  style={{width:'100px',height:'100px',background:'#f2f7fb',marginRight:'20px'}} />
                                            <div>
                                                <p style={{color:'#999999',fontSize:'12px'}}><span style={{color:'#333333',fontSize:'16px',paddingRight:'10px'}}>{item?.name}</span>全科医师</p>
                                                <p style={{fontSize:'14px'}}><span style={{color:'#999999',paddingRight:'10px'}}>签约人数</span>{item?.signCount}</p>
                                                <p style={{fontSize:'14px'}}><span style={{color:'#999999',paddingRight:'10px'}}>医生评分</span>4.9（900人评价）</p>
                                            </div>
                                        </div>
                                        <div style={{display:'flex',justifyContent:'end',padding:'15px 0'}}>

                                            <Button size="middle" onClick={()=>showDrawer(index,1)}>医生详情</Button>
                                        </div>
                                        {
                                            item?.id==teamInfo.manage?.id&&<span style={{position:'absolute',top:'96px',left:'15px',background:'#FDDB78',color:'#fff',fontSize:'12px',padding:'3px 4px',borderRadius:'3px'}}>团队长</span>
                                        }
                                        
                                    </div>
                        })
                    }
                </div>
            </div>
            <div style={{marginBottom:'40px'}}>
                <h3 style={{margin:'20px 0'}}>加入团队申请({teamJoin?.length})</h3>
                <div  style={{display:'flex',alignItems:'center',flexWrap:'wrap'}}>
                    {
                        teamJoin?.map((item:any,index:number)=>{
                            return  <div key={index+item.id} className='item' style={{width:'380px',marginRight:'20px',display:'flex',flexDirection:'column',justifyContent:'end',borderRadius:'15px',padding:'0 15px',boxShadow:'rgba(0, 0, 0, 0.24) 0 3px 8px'}}>
                                        <div style={{display:'flex',alignItems:'center',borderBottom:'1px solid #F2F2F2',padding:'15px 0'}}>
                                            <img src={ImgUrl+item.doctor[0].picture} alt=""  style={{width:'100px',height:'100px',background:'#f2f7fb',marginRight:'20px'}} />
                                            <div style={{fontSize:'13px'}}>
                                                <p style={{color:'#999999',fontSize:'13px'}}><span style={{color:'#333333',fontSize:'16px',paddingRight:'15px'}}>{item.doctor[0].name}</span>{item.doctor[0].number}</p>
                                                <p style={{fontSize:'13px',color:'#999999'}}><span style={{color:'#999999',paddingRight:'10px'}}>职位:</span>护理医师</p>
                                                <p style={{fontSize:'13px',color:'#999999'}}><span style={{color:'#999999',paddingRight:'10px'}}>联系电话:</span>{item.doctor[0].tel}</p>
                                                <p style={{fontSize:'13px',color:'#999999'}}><span style={{color:'#999999',paddingRight:'10px'}}>申请时间:</span>{item.applyTime}</p>
                                            </div>
                                        </div>
                                        <div style={{display:'flex',justifyContent:'end',padding:'15px 0'}}>
                                        <Space>
                                            
                                            {item.status==0&&<>
                                                    <Popconfirm
                                                        title="通过确认"
                                                        description="确定通过此入团申请?"
                                                        onConfirm={()=>confirmJoin(item.doctor.id,item.id)}
                                                        okText="是"
                                                        cancelText="否"
                                                        >
                                                        <Button type="primary" size="middle" >通过</Button>
                                                    </Popconfirm>
                                                    <Popconfirm
                                                        title="拒绝确认"
                                                        description="确定拒绝此入团申请?"
                                                        onConfirm={()=>confirmNo(item.doctor.id,item.id)}
                                                        okText="是"
                                                        cancelText="否"
                                                        >
                                                        <Button type="primary" danger size="middle" >拒绝</Button>
                                                    </Popconfirm>
                                                    </>
                                                }
                                                <Button size="middle" onClick={()=>showDrawer(index,0)}>医生详情</Button>
                                        </Space>
                                        </div>
                                    </div>
                        })
                    }
                </div>
            </div>
            <Space>
                <Button type="primary" size='large' onClick={showModal}>编辑团队信息</Button>
                <Popconfirm
                    title="解散确认"
                    description="确定解散此团队吗？?"
                    onConfirm={confirm}
                    okText="是"
                    cancelText="否"
                    >
                    <Button type="primary" danger size='large' >解散团队</Button>
                </Popconfirm>
                
                <Button size='large' onClick={back}>返回</Button>
            </Space>
            <Modal title="修改团队信息" open={isModalOpen}  onCancel={handleCancel}  footer={false}>
            <Form
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={initialValues}
                    onFinish={onFinish}
                    autoComplete="off"
                    
                >
                    <Form.Item
                    label="团队名称"
                    name="name"
                    rules={[{ required: true, message: '请输入团队名称' }]}
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                    label="所属机构"
                    name="organId"
                    rules={[{ required: true, message: '请选择所属机构' }]}
                    >
                        <Select
                            fieldNames={{label:'name',value:'id'}}
                            options={Organ}
                            />
                    </Form.Item>
                    
                    <Form.Item
                    label="团队标签"
                    name="labelIdStr"
                    >
                            <Select
                            mode="multiple"
                            fieldNames={{label:'name',value:'id'}}
                            allowClear
                            defaultValue={JSON.parse(JSON.stringify(teamInfo?.labelArr)).map((i:any)=>{
                                return i.id
                            })}
                            options={tags}
                            />
                    </Form.Item>
                    <Form.Item
                    label="团队头像"
                    name="picture"
                    >
                        <UpLoadImg  uploadVal={getuploadVal}/>
                    </Form.Item>


                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Space>
                            <Button onClick={handleCancel} >取消</Button>
                            <Button type="primary" htmlType="submit">确定</Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Modal>
            <Drawer title="医生信息" placement="right" onClose={onClose} open={open} size='large'>
                <div  style={{display:"flex",alignItems:'center',flexWrap:'wrap'}}>
                            <p style={{flex:'1'}}><span style={{color:'#999999',marginRight:'15px'}}>医生编号</span>{ Drawerdata?.number}</p>
                            <p style={{flex:'1'}}><span style={{color:'#999999',marginRight:'15px'}}>医生姓名</span>{Drawerdata?.name}</p>
                </div>
                <div style={{display:"flex",alignItems:'center',flexWrap:'wrap'}}>
                        <p style={{flex:'1',display:"flex",alignItems:'center'}} ><span style={{color:'#999999',marginRight:'15px'}} >医生头像</span> <img style={{width:'60px',height:'60px'}} src={ImgUrl+Drawerdata?.picture} alt="" /></p>
                        <p style={{flex:'1'}}><span style={{color:'#999999',marginRight:'15px'}}>性别</span>{Drawerdata?.gender}</p>
                </div>
                <div style={{display:'flex',alignItems:'start',margin:'20px 0'}}>
                    <p style={{color:'#999999',width:'70px'}}>角色</p><p>{Drawerdata?.roleId}</p>
                </div>
                <div style={{display:'flex',alignItems:'start',margin:'20px 0'}}>
                    <p style={{color:'#999999',width:'70px'}}>医生简介</p><p style={{flex:1}}>{Drawerdata?.description}</p>
                </div>
                <div style={{display:'flex',alignItems:'start',margin:'20px 0'}}>
                    <p style={{color:'#999999',width:'70px'}}>医生擅长</p><p style={{flex:1}}>{Drawerdata?.adept}</p>
                </div>
                <div style={{display:'flex',alignItems:'start',margin:'20px 0'}}>
                    <p style={{color:'#999999',width:'70px'}}>加入团队</p><p>1</p>
                </div>
                <div style={{display:'flex',alignItems:'start',margin:'20px 0'}}>
                    <p style={{color:'#999999',width:'70px'}}>签约人数</p><p>{Drawerdata?.signCount}</p>
                </div>
                <div style={{display:'flex',alignItems:'start',margin:'20px 0'}}>
                    <p style={{color:'#999999',width:'70px'}}>创建时间</p><p>{Drawerdata?.createTime}</p>
                </div>
                <div style={{display:'flex',alignItems:'start',margin:'20px 0'}}>
                    <p style={{color:'#999999',width:'70px'}}>创建人</p><p>{Drawerdata?.creatorId}</p>
                </div>
                <div style={{display:'flex',alignItems:'start',margin:'20px 0'}}>
                    <p style={{color:'#999999',width:'70px'}}>账号状态</p>
                    {
                        Drawerdata?.status==0?<p style={{color:'#3DD4A7'}}>启用中</p>:<p>未启用</p>
                    }
                </div>
                {
                    DrawerStatus==1&&<>
                    <Space>
                        <Button type="primary" size='large'>编辑医生信息</Button>
                        {
                            Drawerdata.id!=teamInfo.manage?.id&&<>
                            <Button type="primary" size='large' onClick={()=>upManage(teamInfo.team.id,Drawerdata.id)}>设为团队长</Button>
                            <Button type="primary" danger size='large' >移除成员</Button>
                            </>
                        }
                    </Space>
                    </>
                }
            </Drawer>
        </div>
    )
}
